<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="authorizeDialog"
    :before-close="closeDialog"
    @open="openDialog"
    append-to-body
    width="50%"
    custom-class="jepaas-authorize"
  >
    <div class="form">
      <div
        v-if="dialogTitle === '在线授权'"
        class="dialog_item"
      >
        <p>
          <span class="red">*</span>
          授权码
        </p>
        <el-input
          v-model="form.VERIFY_UNIQUECODE"
          placeholder="请输入内容"
        />
      </div>
      <div
        v-if="dialogTitle === '在线授权'"
        class="dialog_item"
      >
        <p><span class="red">*</span>密钥</p>
        <el-input
          v-model="form.VERIFY_PRIVATE_KEY"
          :maxlength="1000"
          type="textarea"
          class="miyao_message"
          resize="none"
          autosize
        />
      </div>
      <div
        v-if="dialogTitle === '离线授权'"
        class="dialog_item"
      >
        <p><span class="red">*</span>上传 license 文件</p>
        <div class="input_wrp">
          <div
            @click="upload()"
            class="upload"
          >
            {{ offlineform.name }}
          </div>
          <i
            @click="upload()"
            class="fa fa-folder upload_icon"
          />
        </div>
      </div>
    </div>
    <div class="btn_group">
      <span
        v-if="dialogTitle === '在线授权'"
        @click="onlineSubmit"
        class="save"
      >保 存</span>
      <span
        v-else
        @click="offlineSubmit"
        class="save"
      >保 存</span>
      <span
        @click="closeDialog"
        class="close"
      >关 闭</span>
    </div>
  </el-dialog>
</template>
<script>
import { onlineAuthorize, offLineAuthorize } from '../actions/api';

export default {
  name: 'JepaasAuthorization',
  props: {
    dialogTitle: {
      type: String,
      default: '在线授权',
    },
  },
  data() {
    return {
      authorizeDialog: false,
      form: {
        VERIFY_UNIQUECODE: '',
        VERIFY_PRIVATE_KEY: '',
      },
      authorInfo: {},
      offlineform: {
        name: '',
        DOCUMENT_ADDRESS: '',
      },
    };
  },
  methods: {
    // 弹窗展示 初始化表单值对象
    openDialog() {
      this.form = {
        VERIFY_UNIQUECODE: '',
        VERIFY_PRIVATE_KEY: '',
      };
      this.offlineform = {
        name: '',
        DOCUMENT_ADDRESS: '',
      };
    },
    // 上传
    upload() {
      const that = this;
      JE.uploadFile({
        fileTypes: 'license',
        uploadFileType: 'func',
        post_params: { uploadType: 'OTHER' },
        callback(file) {
          that.isUploading = false;
          that.$nextTick(() => {
            that.offlineform.name = file.name;
            that.offlineform.DOCUMENT_ADDRESS = file.url;
          });
        },
      });
    },
    closeDialog() {
      this.form = {};
      this.offlineform = {};
      this.authorizeDialog = false;
    },
    onlineSubmit() {
      if (this.dialogTitle === '在线授权' && !this.form.VERIFY_UNIQUECODE) {
        return JE.msg('授权码不能为空!');
      }
      if (this.dialogTitle === '在线授权' && !this.form.VERIFY_PRIVATE_KEY) {
        return JE.msg('密钥不能为空!');
      }
      // getLicense(this.form).then((data) => {
      // if (data.success && data.obj) {
      onlineAuthorize(this.form)
        .then((res) => {
          JE.msg(res.obj);
          this.authorizeDialog = false;
          this.closeDialog();
        })
        .catch((error) => {
          JE.msg(error.message);
        });
    },
    offlineSubmit() {
      if (
        this.dialogTitle === '离线授权'
        && !this.offlineform.DOCUMENT_ADDRESS
      ) {
        return JE.msg('请上传license文件!');
      }
      offLineAuthorize({ fileKey: this.offlineform.DOCUMENT_ADDRESS }).then(
        (data) => {
          if (!data.success) {
            return JE.msg('授权失败');
          }
          this.authorizeDialog = false;
          JE.msg('离线授权成功，重启服务器生效！');
        },
      );
    },
  },
};
</script>
<style lang="scss">
.jepaas-authorize {
  .el-dialog__body {
    padding-top: 0 !important;
    .el-textarea {
      margin-top: 10px;
      textarea {
        min-height: 200px !important;
      }
    }
    .el-input {
      .el-input__inner {
        height: 30px !important;
        line-height: 30px !important;
        margin-top: 10px !important;
      }
    }
  }
  .form {
    .dialog_item {
      margin-top: 5px;
      .red {
        color: red;
        margin-right: 5px;
      }
      .input_wrp {
        width: 100%;
        border: 1px solid #f3f3f3;
        border-radius: 4px;
        height: 30px;
        padding: 0 10px;
        position: relative;
        margin-top: 5px;
        > input {
          border: 0;
          width: 100%;
          height: 100%;
        }
        .upload {
          line-height: 28px;
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
        .upload_icon {
          position: absolute;
          top: 7px;
          right: 15px;
          font-size: 14px;
          cursor: pointer;
        }
      }
      &:not(:first-child) {
        margin-top: 15px;
      }
    }
  }
  .btn_group {
    width: 100%;
    margin-top: 30px;
    text-align: center;
    > span {
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      background: #f4f4f4;
      border: 1px solid #dddddd;
      color: #444444;
      font-size: 12px;
      &:hover {
        background-color: #e7e7e7;
        border-color: #adadad;
      }
    }
    .save {
      border: 1px solid #386bd0;
      color: #ffffff;
      background: #386bd0;
      &:hover {
        color: #ffffff;
        background-color: #1a4c9c;
        border-color: #1a4c9c;
      }
    }
    .close {
      margin-left: 20px;
    }
  }
}
</style>
